<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js-sdk测试页面</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta content="width=device-width,initial-scale=0.85,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <meta content="always" name="referrer">
        <script type="text/javascript" src="/static/js/jquery-3.6.0.min.js"></script>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="/static/bootstrap3.4.1/css/bootstrap.min.css"
              integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
              crossorigin="anonymous">
        <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
        <link rel="stylesheet" href="/static/bootstrap3.4.1/css/bootstrap-theme.min.css"
              integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ"
              crossorigin="anonymous">
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="/static/bootstrap3.4.1/js/bootstrap.min.js"
                integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
                crossorigin="anonymous"></script>
        <style>
            .css_container {
                display: flex;
                flex-direction: row;
                justify-content: center;
                padding-bottom: 20px;
            }
            .css_container_form {
                display: flex;
                flex-direction: row;
                padding-bottom: 5px;
            }
            .width98 {
                width: 98%;
            }
            .width95 {
                width: 95%;
            }
            .width50 {
                width: 50%;
            }
            .width25 {
                width: 25%;
            }
            .width40 {
                width: 40%;
            }
            .width33 {
                width: 33%;
            }
            .btn-change-before {
                background-color: #fff;
                color: #297abe;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
            }
            .btn-change-after {
                background-color: #007afc;
                color: #fff !important;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
            }
            .btn-submit {
                position: absolute;
                font-size: 20px;
                bottom: 10px;
                width: 90%;
                height: 40px;
                background-color: #007afc;
                transform: translate(5%,0);
                border-radius: 8px;
                border: none;
                color: white;
                animation-name: myAnimation;
                animation-duration: 1.5s;
                animation-iteration-count: infinite;
                /*animation-timing-function: ease-in-out;*/
            }
            @keyframes myAnimation {
                0% { bottom: 10px; }
                50% { bottom: 30px; }
                100% { bottom: 10px; }
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-static-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand">协议sdk测试工具<span class="label label-danger">new 1.1.0</span></a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">文档</a></li>
                        <li><a href="#">历史版本</a></li>
                        <li><a href="#">联系我</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="css_container">
            <div class="btn-group btn-group-justified width98">
                <div class="btn-group">
                    <button type="button" class="btn btn-change-after" id="modalChangeBtn" onclick="changeModal()">弹窗式</button>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-change-before" id="drawChangeBtn" onclick="changeDraw()">抽屉式</button>
                </div>
            </div>
        </div>
        <div class="css_container_form">
            <div class="form-group width50">
                <label for="agreementNo" class="col-lg-2 col-sm-2 control-label">协议编号</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="agreementNo" placeholder="请输入协议编号">
                </div>
            </div>
            <div class="form-group width50">
                <label for="version" class="col-lg-2 col-sm-2 control-label">版本号</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="version" placeholder="请输入版本号">
                </div>
            </div>
        </div>
        <div class="css_container_form">
            <div class="form-group width50">
                <label for="title" class="col-lg-2 col-sm-2 control-label">窗体展示标题</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="title" placeholder="请输入窗体展示标题">
                </div>
            </div>
            <div class="form-group width25">
                <label for="titleColor" class="col-lg-2 col-sm-2 control-label">标题颜色</label>
                <div class="col-sm-10">
                    <input type="color" id="titleColor" class="form-control">
                </div>
            </div>
            <div class="form-group width25">
                <label for="showCancel" class="col-lg-2 col-sm-2 control-label">显示关闭按钮(待开发)</label>
                <div class="col-sm-10">
                    <input id="showCancel" type="checkbox">
                </div>
            </div>
        </div>
        <div class="css_container_form">
            <div class="form-group width50">
                <label for="needSign" class="col-lg-2 col-sm-2 control-label">需要签署</label>
                <div class="col-sm-10">
                    <input id="needSign" type="checkbox">
                </div>
            </div>
            <div class="form-group width50">
                <label for="userId" class="col-lg-2 col-sm-2 control-label">用户编号(签署必传)</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="userId" placeholder="请输入用户编号">
                </div>
            </div>
        </div>
        <div class="css_container_form">
            <div class="form-group width50">
                <label for="forceRead" class="col-lg-2 col-sm-2 control-label">强制阅读</label>
                <div class="col-sm-10">
                    <input id="forceRead" type="checkbox">
                </div>
            </div>
            <div class="form-group width50">
                <label for="forceReadTime" class="col-lg-2 col-sm-2 control-label">强制阅读时长
                    （<span id="showForceReadTime">10</span>）秒</label></label>
                <div class="col-sm-10">
                    <input type="range" min="0" id="forceReadTime" max="100" step="1" value="10"
                           onchange="document.getElementById('showForceReadTime').innerHTML=value">
                </div>
            </div>
        </div>
        <div class="css_container_form">
            <div class="form-group width50">
                <label for="confirmText" class="col-lg-2 col-sm-2 control-label">确认按钮文字</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="confirmText" placeholder="请输入" value="我知道了">
                </div>
            </div>
            <div class="form-group width25">
                <label for="confirmBackGroundColor" class="col-lg-2 col-sm-2 control-label">背景颜色</label>
                <div class="col-sm-10">
                    <input type="color" class="form-control" id="confirmBackGroundColor" value="#2879ff">
                </div>
            </div>
            <div class="form-group width25">
                <label for="confirmTextColor" class="col-lg-2 col-sm-2 control-label">文字颜色</label>
                <div class="col-sm-10">
                    <input type="color" id="confirmTextColor" class="form-control" value="#ffffff">
                </div>
            </div>
        </div>

        <div class="css_container_form">
            <div class="form-group width50">
                <label for="cancelText" class="col-lg-2 col-sm-2 control-label">取消按钮文字</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="cancelText" placeholder="请输入" value="取消">
                </div>
            </div>
            <div class="form-group width25">
                <label for="cancelBackGroundColor" class="col-lg-2 col-sm-2 control-label">背景颜色</label>
                <div class="col-sm-10">
                    <input type="color" id="cancelBackGroundColor" class="form-control" value="#efefef">
                </div>
            </div>
            <div class="form-group width25">
                <label for="cancelTextColor" class="col-lg-2 col-sm-2 control-label">文字颜色</label>
                <div class="col-sm-10">
                    <input type="color" id="cancelTextColor" class="form-control" value="#000000">
                </div>
            </div>
        </div>
        <div class="css_container_form">
            <div class="form-group width50">
                <label for="timeout" class="col-lg-2 col-sm-2 control-label">超时时间
                    （<span id="showTimeout">3</span>）秒</label>
                <div class="col-sm-10">
                    <input type="range" min="0" id="timeout" max="10" step="1" value="3" onchange="document.getElementById('showTimeout').innerHTML=value">
                </div>
            </div>
        </div>

        <button class="btn-submit" onclick="showAgreementSDK()">☺☺弹出☺☺</button>
        <script>
            let type = "modal";
            function changeModal() {
                $("#modalChangeBtn").removeClass("btn-change-before");
                $("#modalChangeBtn").addClass("btn-change-after");
                $("#drawChangeBtn").removeClass("btn-change-after");
                $("#drawChangeBtn").addClass("btn-change-before");
                type = "modal";
            }
            function changeDraw() {
                $("#drawChangeBtn").removeClass("btn-change-before");
                $("#drawChangeBtn").addClass("btn-change-after");
                $("#modalChangeBtn").removeClass("btn-change-after");
                $("#modalChangeBtn").addClass("btn-change-before");

                type = "draw";
            }
            function showAgreementSDK() {
                let agreementNo = $("#agreementNo").val();
                let version = $("#version").val();
                let title = $("#title").val();
                let titleColor = $("#titleColor").val();
                let needSign = $("#needSign").val();
                let userId = $("#userId").val();
                // let forceRead = $('input[name="forceRead"]:checked').val();
                let forceRead =$("#forceRead").val();
                let forceReadTime = $("#forceReadTime").val();
                let confirmText = $("#confirmText").val();
                let confirmBackGroundColor = $("#confirmBackGroundColor").val();
                let confirmTextColor = $("#confirmTextColor").val();
                let cancelText = $("#cancelText").val();
                let cancelBackGroundColor = $("#cancelBackGroundColor").val();
                let cancelTextColor = $("#cancelTextColor").val();
                if (type === "modal") {
                    AgreementSDK.startModal({
                        agreementNo: agreementNo,
                        version: version,
                        options: {
                            title: title,
                            titleColor: titleColor,
                            needSign: needSign,
                            userId: userId,
                            forceRead: forceRead,
                            forceReadTime: forceReadTime,
                            confirmText: confirmText,
                            confirmBackGroundColor: confirmBackGroundColor,
                            confirmTextColor: confirmTextColor,
                            cancelText: cancelText,
                            cancelBackGroundColor: cancelBackGroundColor,
                            cancelTextColor: cancelTextColor
                        },
                        onStart: () => {
                            console.log("启动")
                        },
                        onConfirm: () => {
                            console.log("确认")
                        },
                        onClose: () => {
                            console.log("关闭")
                        },
                        onError: () => {
                            console.log("错误")
                        }
                    });
                } else if (type === "draw") {
                    AgreementSDK.startDraw({
                        agreementNo: agreementNo,
                        version: version,
                        options: {
                            title: title,
                            titleColor: titleColor,
                            needSign: needSign,
                            userId: userId,
                            forceRead: forceRead,
                            forceReadTime: forceReadTime,
                            confirmText: confirmText,
                            confirmBackGroundColor: confirmBackGroundColor,
                            confirmTextColor: confirmTextColor,
                            cancelText: cancelText,
                            cancelBackGroundColor: cancelBackGroundColor,
                            cancelTextColor: cancelTextColor
                        },
                        onStart: () => {
                            console.log("启动")
                        },
                        onConfirm: () => {
                            console.log("确认")
                        },
                        onClose: () => {
                            console.log("关闭")
                        },
                        onError: () => {
                            console.log("错误")
                        }
                    });
                }
            }
        </script>
    </body>
</html>
